import React, { useState, useEffect } from 'react';
import { KSwitch, for_obj, cline, uReal, useKForm, useHigh, useCmd, WaitUmd, MainView, KFind, ck_empty, obj_empty, KSelect,
    PanelTitle, Btn, loc } from 'sui';
import { load_tech } from '../cmd';
import { ChartNoPair } from '../chart/nopair';
import { GatherView } from './gather';
import { User } from 'cache';

const NoPairView = () => {
    const [main, setMain] = useState();
    const [cur, setCur] = useState();
    const [lst_tech, lstTech] = useState();
    const [high] = useHigh(252, 100);
    const umd = useCmd();
    const form = useKForm();

    useEffect(() => {
        load_tech(lstTech);
        setMain(null);
        setCur(null);
    }, []);

    if (umd.isFin("gather")) {
        return <GatherView hreturn={umd.hreturn} lst_tech={lst_tech}/>;
    }

    const hCalc = () => {
        const ck = {
            tsn : v => ck_empty(v),
        };

        if (form.isErr(ck)) {
            return;
        }

        umd.startWait();

        const opt = {
            tsn: form.get("tsn"),
        };

        const pbox = form.get("pbox");
        if (pbox === "Y") {
            opt["pbox"] = true;
            opt["usn"] = User.userName();
        }

        uReal(null, "pair/nopair",
            {
                line: cline(),
                ...opt,
            },
            r => {
                setMain(r);
                umd.endWait();
            }, e => umd.setErr(loc("l_196")));
    };

    const hDone = () => {
        const tp = form.get("tp");
        const dia = form.get("dia");

        const ck = {
            tp: v => ck_empty(v),
            dia: v => ck_empty(v),
        };

        if (form.isErr(ck)) {
            return;
        }

        setCur({
            tp: tp,
            dia: dia,
            data: main[tp],
        });
    };

    const getTitle = () => {
        const tp = form.get("tp");

        if (tp === "inner") {
            return loc("l_746");
        } else if (tp === "outer") {
            return loc("l_745");
        }

        return "";
    };

    const getView = () => {
        if (obj_empty(main)) {
            return null;
        }

        const lst = [
            {sn: "inner", name: loc("l_784")},
            {sn: "outer", name: loc("l_783")},
        ];

        const getLst = () => {
            const tp = form.get("tp");
            const val = main[tp];

            if (!val) {
                return null;
            }

            const ret = [];

            for_obj(val, (k, ) => ret.push({ sn: k, name: k }));

            return ret;
        };

        const Left = () => (
            <div className="flex flex-row">
                <KSelect label={loc("l_229")} form={form} name="tp" mg="dense" width="w-56" className="mr-4 mt-2" lst={lst}/>
                <KFind label={getTitle()} form={form} name="dia" margin="dense" width="w-56" list={getLst()}/>
                <Btn className="ml-4" hcmd={hDone}>{loc("l_785")}</Btn>
            </div>
        );

        return <PanelTitle left={<Left/>} cl="green"/>;
    };

    const Right = () => (
        <div className="inline-flex mr-3">
            <KSwitch form={form} name="pbox" className="ml-2">{loc("l_799")}</KSwitch>
        </div>
    );

    const Left = () => {
        return (
            <div className="inline-flex items-center">
                {loc("l_782")}
                <Btn className="ml-8" hcmd={() => umd.pact(null, null, "gather")} color="teal">{loc("l_804")}</Btn>
            </div>
        );
    };

    return (
        <MainView>
            <PanelTitle left={<Left/>} cl="gray" right={<Right/>}>
                <div className="inline-flex items-center">
                    <Btn className="mr-4 mb-4 mt-4" hcmd={hCalc}>{loc("l_701")}</Btn>
                    <KFind label={loc("l_694")} form={form} name="tsn" margin="dense" width="w-56" list={lst_tech}/>
                </div>
            </PanelTitle>
            {getView()}
            <div style={{ high: high + "px" }} className="overflow-y-auto">
                <ChartNoPair cur={cur} tp="width" title={`${getTitle()} - ${loc("l_747")}`}/>
                <ChartNoPair cur={cur} tp="dt" title={`${getTitle()} - ${loc("l_786")}`}/>
            </div>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {NoPairView};
